<template>
  <view v-if="message">
    <view class="time" v-if="message.recordTime && index % 10 === 0">{{ message.recordTime }}</view>
    <view class="message-root">
      <view
        class="avatar-text-box"
        :class="{ right: message.type != 2 && message.type != 3, left: message.type == 2 || message.type == 3 }"
      >
        <view style="width: 100%">
          <view class="message-text-box">
            <view class="padding-box">
              <view class="sayHelloContent" v-if="message.sayHelloContent">
                {{ message.sayHelloContent }}
              </view>
              <rich-text
                v-if="(message.type == 1 || message.type == 2 || message.type == 3) && !message.picUrl"
                id="message-text"
                :nodes="message.txt"
                class="text"
                style="word-break: break-all; white-space: pre-line"
              ></rich-text>
              <view class="text"
                @click="playAudio(message.speechUrl)"
                v-if="message.speechUrl"
                style="
                word-break: break-all;
                white-space: pre-line;
                justify-content: flex-end;
                "
                :style="{
                  width: 150 + 3.5 * Math.ceil(message.speechDuration / 1000) + 'rpx',
                }"
              > {{message.speechDuration}} <text>''</text>
                <view
                  class="pay-icon"
                  :class="{ 'playing-gif': isPlaying }"
                ></view>
              </view>
              <image
                v-if="message.picUrl"
                :src="message.picUrl"
                mode="aspectFill"
                class="pic-box"
              />
            </view>
            <!-- 酒店/门票订单 -->
            <block v-if="message.chatCardList && message.chatCardList.length &&  (message.chatCardList[0].type == 202 || message.chatCardList[0].type == 203 || message.chatCardList[0].type == 402 || message.chatCardList[0].type == 204)">
              <view style="margin-top: 20rpx">
                <hotel-order-card
                  :cardType="message.chatCardList[0].type"
                  :info="message.chatCardList[0]"
                  @sureClick="actionClick"
                  :unclickable="true"
                />
              </view>
            </block>
            <!-- 新商品卡片  统一样式 -->
            <block v-if="message.chatSynthesizeCard">
              <UnifyCard ref="unifyCard" :conversationId="conversationId" :data="message.chatSynthesizeCard" />
            </block>
            <block v-if="message.poiCard">
              <poi-phone-card :messageData="message.poiCard" />
            </block>
            <!-- 攻略 -->
            <block v-if="message.refArticleObj">
              <Strategy
                :title="message.refArticleObj.articleText"
                :titleList="message.refArticleObj.articleList"
              ></Strategy>
            </block>
            <!-- 提问 -->
            <block
              v-if="
              message.guidingSuggestActions &&
                message.guidingSuggestActions.length > 0 &&
                message.answerType == 9 && message.welcomeCard
              "
            >
              <view class="problem-box">
                <view class="problem-box-title">
                  <view>你可以试着问我👇:</view>
                  <view
                    class="refresh-box"
                    @click="guidingSuggestActions(0)"
                    :data-spmCntSuffix="`ChatAiPage.helloCard@1.change`"
                    :data-custom="1"
                    :data-spm="1"
                  >
                    换一批
                    <img
                      class="refresh-icon"
                      src="https://cdn1.visiotrip.com/h5AndMini/2023-11-17/refresh-icon.png"
                    />
                  </view>
                </view>
                <!-- 欢迎题词 -->
                <view v-if="message.welcomeCard.cardList" class="problem-box-list">
                  <block 
                    v-for="(item,index) in message.welcomeCard.cardList" 
                    :key="index">
                    <view
                      :class="'action-box action-' + item.cardType + (index===2 && message?.welcomeCard?.cardList.length===3 ? ' last' : '')"
                      v-if="item.cardType !== 'PRODUCT'"
                    >
                      <view class="action-title-box">
                        <!-- <img :src="item.icon" class="title-icon" alt="" srcset=""> -->
                        <img :src="item.titleImg" class="title-img" alt="" srcset="">
                        <!-- <view :class="'subTitle title-'+ item.cardType">{{ item.subTitle }}</view> -->
                      </view>
                      <view style="position: absolute;width: 100%;z-index: 99;display:flex;flex-direction: column;height:180rpx;">
                        <block v-for="(actionItem,actionIndex) in item.promptList" :key="actionIndex">
                          <block v-if="actionIndex < 3">
                            <view
                              class="problem-list-item" 
                              :class="'list-'+ item.cardType"
                              @click="actionClick(actionItem,item)"
                              :data-spmCntSuffix="`ChatAiPage.helloCard@2.chose`"
                              :data-custom="index + 1"
                              :data-spm="actionItem"
                            >
                              <view class="item-title omit1">{{ actionItem.promptText }}</view>
                              <img style="width: 22rpx;height: 22rpx" src="../../../static/ai/icon/card-right.png" />
                            </view>
                          </block>
                        </block>
                      </view>
                    </view>
                    <view v-else class="scroll-box">
                      <view 
                        v-for="(actionItem,actionIndex) in item.promptList" :key="actionIndex"
                        :data-spmCntSuffix="`ChatAiPage.helloCard@2.product`"
                        :data-custom="index + 1"
                        :data-spm="actionItem"
                        @click="toProductDetail(actionItem)"
                        class="scroll-item">
                        <view class="item-box">
                          <view class="img-box">
                            <img
                              class="item-img"
                              :src="actionItem.mainPictureUrl"
                              mode="aspectFill"
                            />
                            <view class="item-tips">
                              <view class="tips-box">{{actionItem.textContent}}</view>
                            </view>
                            <img
                              class="item-icon"
                              :src="actionItem.productTypeIconUrl"
                            />
                          </view>
                          <view class="item-info">
                            <view class="info-title omit1">
                              {{actionItem.productName}}
                            </view>
                            <view class="price-box" >
                              <view class="price-1">{{actionItem.priceInfo.currency}}{{actionItem.priceInfo.price}}</view>
                              <view class="price-2">{{actionItem.priceInfo.description}}</view>
                            </view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </block>
                </view>
              </view>
            </block>
            <!-- 是否切换目的地 -->
            <block v-if="message.sceneCode == 29">
              <view class="sureChangeBox">
                <view
                  class="btn-box false disabled"
                  :data-spmCntSuffix="`ChatAiPage.message@2.location@3`"
                  :data-custom="1"
                  :data-spm="1"
                >
                  <view class="btn-txt">否</view>
                </view>
                <view
                  class="btn-box true disabled"
                  :data-spmCntSuffix="`ChatAiPage.message@2.location@2`"
                  :data-custom="1"
                  :data-spm="1"
                >
                  <view class="btn-txt">是</view>
                </view>
              </view>
            </block>
          </view>
        </view>
      </view>
    </view>
    <!-- 新行程推荐 推荐卡片 -->
    <block v-if="message.itineraryCard">
      <ItineraryBox :message="message" />
    </block>
    <!-- 行程偏好 -->
    <block v-if="message.itineraryTheme">
      <chatCard
        :title="`旅行偏好`"
        :iconSrc="''"
      >
        <template v-slot:content>
          <Preference
            :showData="{
              card: message,
            }"
            :showRecord="true"
          />
        </template>
      </chatCard>
    </block>
    <!-- 分享卡片 -->
    <block v-if="((message.product && message?.chatCardList.length == 0) || message.poi || (message.aiPhoto && message.answerType == 5)) && !message.chatSynthesizeCard">
      <chatCard
        :title="'推荐商品'"
        :iconSrc="'https://cdn1.visiotrip.com/h5AndMini/2023-09-14/title-icon-1.png'"
      >
        <view slot="content">
          <!-- 分享推荐商品 -->
          <PoiCard
            v-if="message.product"
            mode="product"
            :info="message.product"
          />
          <!-- 分享POI -->
          <PoiCard v-if="message.poi" mode="poi" :info="message.poi" />
          <!-- 分享旅拍相册 -->
          <PoiCard
            v-if="message.aiPhoto"
            mode="aiPhoto"
            :info="message.aiPhoto"
          />
        </view>
      </chatCard>
    </block>
    <!-- 订单 -->
    <block v-if="message.orderInfo && message?.chatCardList.length == 0">
      <OrderCard :info="message.orderInfo"></OrderCard>
    </block>
    <!-- 在线签合同 -->
    <block
      v-if="message.contractInfoList && message?.contractInfoList.length > 0"
    >
      <view v-for="(item, index) in message.contractInfoList" :key="index">
        <ContractCard :contractInfo="item" />
      </view>
    </block>
    <!-- AI智能旅拍 -->
    <block v-if="message.answerType === 7 && message.type === 2">
      <AiPhotoCard></AiPhotoCard>
    </block>
    <block v-if="message.answerType == 11">
      <AiPhotoShareCard :info="message.aiPhoto"></AiPhotoShareCard>
    </block>
    <!-- 组合商品打包分享 -->
    <block v-if="message.shareDSPInfo && !message.chatSynthesizeCard">
      <chatCard
          :title="'推荐商品'
          "
          :iconSrc="'https://cdn1.visiotrip.com/h5AndMini/2023-09-14/title-icon-1.png'"
        >
          <view slot="content">
            <PoiCard
              mode="shareDSP"
              :info="message.shareDSPInfo"
            />
          </view>
        </chatCard>
    </block>
    <!-- 酒店分享 -->
    <block v-if="message.chatCardList && message?.chatCardList.length && message.chatCardList[0].type == 201 && !message.chatSynthesizeCard">
      <ai-hotel-share-card :info="message.chatCardList[0]" />
    </block>
    <!-- 酒店偏好 -->
    <block v-if="message.chatCardList && message?.chatCardList.length && message.chatCardList[0].type == 301 && !message.chatSynthesizeCard">
      <chatCard
        :title="message.chatCardList[0].args.cardTitle.content"
        :iconSrc="message.chatCardList[0].args.cardTitle.titleIcon"
      >
        <view slot="content">
          <HotelPreference
            :showData="message.chatCardList[0].args"
          />
        </view>
      </chatCard>
    </block>
    <!-- AI推荐酒店比价 -->
    <block v-if="message.chatCardList && message?.chatCardList.length && message.chatCardList[0].type == 302 && !message.chatSynthesizeCard">
      <chatCard
        :title="message.chatCardList[0].args.cardTitle.content"
        :iconSrc="message.chatCardList[0].args.cardTitle.titleIcon"
      >
        <view slot="content">
          <hotel-price-parity
            :showData="message.chatCardList[0].args"
            @sureClick="actionClick"
          />
        </view>
      </chatCard>
    </block>
    <!-- 旅拍权益领取 -->
    <block v-if="message.chatCardList && message?.chatCardList.length && (message.chatCardList[0].type == 401 || message.chatCardList[0].type == 306) && !message.chatSynthesizeCard">
      <ai-photo-share-card :info="message.chatCardList[0]" type="receive" />
    </block>
    <block v-if="message.chatCardList && message?.chatCardList.length && message.chatCardList[0].type == 303 && !message.chatSynthesizeCard">
      <HotelCompare @callBack="compareCall" :chatCardList="message.chatCardList"></HotelCompare>
    </block>
    <!-- 客服二维码 -->
    <block v-if="message.wechatUrl">
      <img class="wechatUrl" @click="openWeChatUrl([message.wechatUrl])" :src="message.wechatUrl">
    </block>
    <!-- 迪士尼指引图片 -->
    <block v-if="message.imageList && message?.imageList.length > 0">
      <view style="display: flex;flex-direction: column">
        <img class="imgUrl"
          v-for="(url, index) in message.imageList"
          :key="index"
          :data-spmCntSuffix="'ChatAiPage.dsnUrl@1.click'"
          :data-custom="1"
          :data-spm="1"
          @click.stop="openWeChatUrl([url.image])"
          :src="url.expandImage || url.image"
          mode="widthFix"
        />
      </view>
    </block>
    <block v-if="message.graphicItineraryCard">
      <new-journal-card :cardData="message.graphicItineraryCard" :unClickable="true" />
    </block>
  </view>
</template>

<script>
import chatCard from "./chatCard/index.vue";
import Strategy from "./strategy/index.vue";
import ItineraryBox from "./ItineraryBox/index.vue";
import Preference from "./preference/preference.vue";
import PoiCard from "./poiCard.vue";
import OrderCard from "./orderCard.vue";
import ContractCard from "./contractCard.vue";
import AiPhotoCard from './aiPhotoCard.vue'
import AiPhotoShareCard from './aiPhotoShareCard.vue';
import HotelPreference from './hotelPreference/HotelPreference.vue'
import HotelPriceParity from './hotelPriceParity/hotelPriceParity.vue';
import HotelOrderCard from './hotelOrderCard.vue';
import AiHotelShareCard from "./aiHotelShareCard.vue";
import HotelCompare from './hotelCompare.vue'
import NewJournalCard from './newJournalCard.vue';
import UnifyCard from './unifyCard.vue'
import PoiPhoneCard from './poiPhoneCard.vue';
export default {
  props: {
    item: {
      type: Object,
      default: {},
    },
    index: {
      type: Number,
      default: 0,
    },
    conversationId:{
      type: String,
      default: "",
    }
  },
  components: {
    chatCard,
    Strategy,
    ItineraryBox,
    Preference,
    PoiCard,
    OrderCard,
    ContractCard,
    AiPhotoCard,
    AiPhotoShareCard,
    HotelPreference,
    HotelPriceParity,
    HotelOrderCard,
    AiHotelShareCard,
    HotelCompare,
    NewJournalCard,
    UnifyCard,
    PoiPhoneCard
  },
  watch: {
    item: {
      handler(newVal, oldVal) {
        console.log('历史总条数--------', newVal, oldVal);
      },
      deep: true,
    },
  },
  computed: {
    message() {
      let obj = {};
      if (this.item.type == 1) {
        //用户发起对话
        obj = {
          txt: this.item.question,
          ...this.item,
        };
      } else if (this.item.type == 2) {
        // 管家回答-chatToAssistantResponse
        obj = {
          txt: this.item?.chatToAssistantResponse.answer,
          ...this.item,
          ...this.item?.chatToAssistantResponse,
          type: this.item.type,
        };
      } else if (this.item.type == 3) {
        // 管家回答-loopAnswerResponse
        obj = {
          txt: this.item?.loopAnswerResponse.answer,
          ...this.item,
          ...this.item?.loopAnswerResponse,
          type: this.item.type,
        };
      }else {
        //用户发起对话语音
        obj = {
          ...this.item,
        };
      }
      console.log('历史记录-------------------', obj);
      // console.log(obj);
      return obj;
    },
  },
  data() {
    return {
      innerAudioContext:'',
      isPlaying:false,
    };
  },
  mounted() {
    // 创建音频上下文
    this.innerAudioContext = uni.createInnerAudioContext();
  },
  methods: {
    //行程商品
    showProduct(dspId){
      console.log('dspId', dspId)
      this.$emit("getDspProduct", { dspId: dspId, type: 2, dspStatus:false });
    },
    setTabBar(code) {
      this.$emit("setTabBar", code);
    },
    onStrategyClick({ list, item, index }) {
      this.$emit("onStrategyClick", { list, item, index });
    },
    //获取问题列表
    guidingSuggestActions(code) {
      this.$emit("guidingSuggestActions", code);
    },
    actionClick(item) {
      if (!this.$isLogin()) {
        return;
      } else {
        let text = item.promptText? item.promptText : item.actionText
        item.actionText = text
        this.$emit("sureClickCall", {...item, type: "actions", txt: item.actionText });
      }
    },
    // 发出的语音播放
    playAudio(speechUrl) {
      if (this.isPlaying) return;
      this.isPlaying = true;
      this.innerAudioContext.src = speechUrl || this.message.speechUrl;
      this.innerAudioContext.play();
      this.innerAudioContext.onEnded(() => {
        this.isPlaying = false;
      });
    },
    openWeChatUrl(list){
      uni.previewImage({
        urls: list
      })
    },
    compareCall(){
      return
    }
  },
};
</script>

<style lang="scss" scoped>
.time {
  text-align: center;
  height: 52rpx;
  line-height: 52rpx;
  color: #767697;
  font-size: 24rpx;
  margin-top: 24rpx;
}
.message-root {
  margin-top: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  .avatar-text-box {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    position: relative;
    .pic-box {
      width: 420rpx;
      height: 420rpx;
      border-radius: 26rpx;
    }
    &.left {
      justify-content: flex-start;
      .message-text-box {
        margin-top: 6rpx;
        background: rgba(255, 255, 255, 0.40);
        border-radius: 8rpx 26rpx 26rpx 26rpx;
        padding: 6rpx 0;
        border: 4rpx solid #ffffff;
        .padding-box {
          padding: 0 26rpx;
          .text {
            font-size: 32rpx;
            line-height: 46rpx;
            border-radius: 20rpx;
            display: flex;
            align-content: center;
            // justify-content: center;
            min-height: 36rpx;
            color: #131328;
            margin: 20rpx 0;
          }
        }
      }
    }
    &.right {
      justify-content: flex-end;
      margin-left: 66rpx;
      .padding-box {
        display: flex;
        justify-content: flex-end;
      }
      .message-text-box {
        .text {
          background: rgba(253, 255, 235, 1);
          border-radius: 26rpx 26rpx 8rpx 26rpx;
          font-size: 28rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #131328;
          border: 1rpx solid #ffffff;
          backdrop-filter: blur(10.8695652174px);
          margin-top: 6rpx;
          padding: 16rpx 26rpx;
          line-height: 46rpx;
          display: flex;
          align-content: center;
          justify-content: center;
          min-height: 36rpx;
        }
      }
    }
  }
}
.problem-box{
  margin: 0 20rpx 16rpx 20rpx;
  color: $sl-color-black;
  font-size: 32rpx;
  .problem-box-title{
    display: flex;
    justify-content: space-between;
    margin-bottom: 8rpx;
    line-height: 46rpx;
    .refresh-box{
      display: flex;
      align-items: center;
      color: #767697;
      font-size: 28rpx;
      line-height: 40rpx;
      .refresh-icon{
        width: 22rpx;
        height: 20rpx;
        margin-left: 9rpx;
      }
    }
  }
  .problem-box-list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    .action-box{
      position: relative;
      width: 317rpx;
      // 252rpx
      height: 270rpx;
      border-radius: 26rpx;
      margin-top:12rpx;
      padding-bottom: 12rpx;
      .action-bg-img {
        width: 140rpx;
        height: 140rpx;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        background-size: cover;
      }
      &.action-ARTICLE{
        background: linear-gradient( 180deg, rgba(169, 84, 19, 1) 0%, rgba(207, 172, 136, 1) 100%), #FFFFFF;
        .action-bg-img {
          background-image: url('');
        }
      }
      &.action-AIGC{
        background: linear-gradient( 180deg, #FFA6CA 0%, rgba(255,255,255,0) 100%), #FFFFFF;
        .action-bg-img {
          background-image: url('https://cdn1.visiotrip.com/h5AndMini/2024-09-19/aigc-img.png');
        }
      }
      &.action-ITINERARY{
        background: linear-gradient( 180deg, rgba(27, 157, 97, 1) 0%, rgba(118, 174, 109, 1) 100%), #FFFFFF;
        .action-bg-img {
          background-image: url('');
        }
      }
      &.action-ORDER{
        background: linear-gradient( 180deg, #B3C5FF 0%, rgba(255,255,255,0) 100%), #FFFFFF;
        .action-bg-img {
          background-image: url('https://cdn1.visiotrip.com/h5AndMini/2024-09-19/order-img.png');
        }
      }
      &.last {
        position: absolute;
        top: 264rpx;
        right: 0;
      }
      .action-title-box{
        padding: 30rpx 18rpx 28rpx 18rpx;
        display: flex;
        align-items: center;
        .subTitle{
          font-size:20rpx;
          padding-left: 16rpx;
        }
        .title-icon{
          width: 24rpx;
          height: 24rpx;
        }
        .title-img{
          width: 126rpx;
          height: 30rpx;
        }
        .title-ARTICLE{
          color: #8249c7;
        }
        .title-AIGC{
          color:#F98FDB;
        }
        .title-ITINERARY{
          color:#7B73ED;
        }
        .sub-title{
          font-size: 20rpx;
          color: #7B73ED;
        }
      }
      .line-view {
        height: 2rpx;
        background: linear-gradient( 270deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
        margin: 0 18rpx;
      }
    }
    .problem-list-item{
      margin: 0rpx 10rpx 0rpx 18rpx;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: 16rpx;
      .item-title{
        color: $sl-color-btn-txt;
        font-size: 24rpx;
        font-weight: 600;
        line-height: 34rpx;
        flex: 1;
        padding-right: 12rpx;
      }
      .item-btn{
        width: 112rpx;
        height: 54rpx;
        background: $sl-bg-color-grey;
        border-radius: 27rpx;
        color: $sl-color-blue;
        font-size: 28rpx;
        font-weight: 600;
        text-align: center;
        line-height: 54rpx;
      }
      &.list-ORDER{
        
      }
      &.list-ITINERARY{
        
      }
      &.list-AIGC{
        
      }
      &.list-ARTICLE{
        
      }
    }
  }
}
.sayHelloContent{
  margin: 14rpx 20rpx 0 0;
  color: #131328;
  font-weight: 600;
  font-size: 36rpx;
  line-height: 52rpx;
}
.sureChangeBox {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 70rpx;
  margin-bottom: 20rpx;
  margin-top: 20rpx;
  .btn-box {
    height: 68rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 34rpx;
    &.false {
      background: #e5ebff;
      width: 190rpx;
      &.disabled {
        .btn-txt {
          color: #5876d6;
          opacity: 0.4;
        }
      }
      .btn-txt {
        color: #5876d6;
        font-size: 28rpx;
      }
    }
    &.true {
      background: #7696ff;
      width: 250rpx;
      &.disabled {
        background: rgba(118, 150, 255, 0.4);
      }
      .btn-txt {
        color: #ffffff;
        font-size: 28rpx;
      }
    }
    .btn-icon {
      width: 216rpx;
      height: 60rpx;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}
.pay-icon {
  width: 40rpx;
  height: 40rpx;
  margin-left: 20rpx;
  background: url("https://cdn1.visiotrip.com/h5AndMini/2023-09-14/record-paying.png")
    0 0 no-repeat;
  background-size: 100%;

  &.playing-gif {
    width: 40rpx;
    height: 40rpx;
    background: url("https://cdn1.visiotrip.com/h5AndMini/2023-09-14/play-icon.gif")
      0 0 no-repeat;
    background-size: 100%;
  }
}
.wechatUrl{
  margin-top: 20rpx;
  width: 400rpx;
  height: 400rpx;
}

.imgUrl {
  margin-top: 12rpx;
  width: 220rpx;
  // height: 400rpx;
  border-radius: 26rpx;
}
</style>
